<template>
    <div class="index">
        <router-view></router-view>
        <!-- 底部导航栏 -->
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" router>
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/shopCar" :badge="carSum">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/mine">个人</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>

import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'

export default {
    setup(props) {
        const active = ref(0)
        const {state} = useStore()
        const token = localStorage.getItem('token')
        const carSum = computed(()=>{
            let sum=0
            state.shopList.forEach(item=>{
                sum+=item.carNum
            })
            return sum
        })
        console.log(carSum);
        if(!token){
             carSum.value = null
             return
        }




        return {active,carSum}
    }
}
</script>